const title2 = {
    type: 'title2',
    level: Number,
    children: [{ text: '' }]
}
//   渲染元素到编辑器
function renderTitle2(elem, children, editor) { 
    const {  level = '' } = elem;                                 // JS 语法
    const spanVnode = h(
        // HTML tag
        'div',
        // HTML 属性、样式、事件
        {
            props: { contentEditable: false }, // HTML 属性，驼峰式写法
            style: {
                background: "red", textAlign: "center", width: "30px", height: "2px", margin: "0 auto",
                userSeletct: "none",
                "-webkit-user-seletct": "none",
                "-moz-user-seletct": "none",/* 其他... */
            }, // style ，驼峰式写法
        }
    )

    const span2Vnode = h(
        // HTML tag
        'div',
        // HTML 属性、样式、事件
        {
            props: {className: "w-e-text-container"}, // HTML 属性，驼峰式写法
            style: { fontSize: "20px", textAlign: "center", width: "100%", fontWeight: 700, }, // style ，驼峰式写法
        }, children
    )
    // 附件元素 vnode
    const titleVnode = h(
        // HTML tag
        'div',
        // HTML 属性、样式、事件
        {
            props: {}, // HTML 属性，驼峰式写法
            dataset:{level:level},
            style: { display: "flex", flexDirection: "column", justifyContent: "center"/* 其他... */ }, // style ，驼峰式写法
        },
        // 子节点
        [span2Vnode, spanVnode]
    )
    return titleVnode
}
const renderTitle2Conf = {
    type: 'title2', // 新元素 type ，重要！！！
    renderElem: renderTitle2,
}
//   getHtml时传值
function title2ToHtml(elem, childrenHtml) {                             // JS 语法

    // 获取附件元素的数据
    const { level = '' } = elem
    // 生成 HTML 代码
    const html = `<div data-w-e-type="title2"
    data-level="${level}"
    ><div style="font-size:20px;text-align:center;font-weight: 700;">${elem.children[0].text}</div>
    <div style="background:red;text-align:center;width:30px;height:2px;margin:0 auto;userSeletct: none;
    -webkit-user-seletct: none;
    -moz-user-seletct: none"></div></div>`
    return html
}
const title2ToHtmlConf = {
    type: 'title2', // 新元素的 type ，重要！！！
    elemToHtml: title2ToHtml,
}

function parseTitle2Html(
    elem,
    children,
    editor) {
    const $elem = $(elem)
    const level = elem.getAttribute('data-level') || 1
    // children = children.filter(child => {
    //     if (typeof child == 'string') return true
    //     if (editor.isInline(child)) return true
    //     return false
    // })
    if (children.length === 0) {
        children = [{ text: $elem.text().replace(/\s+/gm, ' ') }]
    }
    // 无 children ，则用纯文本
    const myTitle2 = {
        type: 'title2',
        level:level,
        children, // void node 必须有 children ，其中有一个空字符串，重要！！！
      }
    
      return myTitle2
}

const parsetitle2HtmlConf = {
    selector: 'div[data-w-e-type="title2"]', // data-w-e-type 属性，留给自定义元素，保证扩展性
    parseElemHtml: parseTitle2Html,
}
